<template>
  <div>
    <van-address-edit
      :area-list="AreaList"
      show-postal
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @change-detail="onChangeDetail"
    />
    <van-button @click="onBackClicked" style="width: 92vw;height:1rem;line-height:1rem;" color="#fff" round size="large"><span style="color:#000;">返回地址列表</span></van-button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import AreaList from '../area'
// import http from 'axios'

import Vue from 'vue'
import { AddressEdit, Toast } from 'vant'
Vue.use(AddressEdit).use(Toast)
export default {
  data () {
    return {
      AreaList,
      addressDetail: ''
    }
  },
  methods: {
    ...mapActions('addressModule', ['addArea', 'modifyItem']),
    // edit
    onSave (content) {
      content.addressDetail = this.addressDetail
      content.address = (content.province.substr(0, 2) === content.city.substr(0, 2) ? content.city : content.province + content.city) + content.county + ' ' + this.addressDetail
      if (this.$route.params.editType) {
        // 改
        this.modifyItem({ id: this.$route.params.editType, ...content }).then(() => {
          Toast({
            message: '修改地址成功~',
            closeOnClick: true
          })
        })
      } else {
        // 新增
        content.id = 'area' + new Date().getTime()
        this.addArea(content).then(() => {
          Toast({
            message: '添加地址成功~',
            closeOnClick: true
          })
        })
      }
    },
    onBackClicked () {
      this.$router.push({ name: 'Address-list' })
    },
    onChangeDetail (val) {
      if (val) {
        this.addressDetail = val
      } else {
        this.addressDetail = ''
      }
    }
  }
}
</script>

<style>

</style>
